<div class="main-section">
    <h1 class="main-section__title">Dropdown</h1>

    <p class="main-section__intro">
        <code>lx-dropdown</code> is a directive that create a dropdown menu.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/dropdown/includes/basic.html">
        Two directives need to be transcluded.<br />
        <code>lx-dropdown-toggle</code> that transclude the toggle button and <code>lx-dropdown-menu</code> that transclude the menu content.
    </lx-component>

    <lx-component lx-title="Advanced usage" lx-path="/includes/modules/dropdown/includes/advanced.html" lx-js-path="/js/dropdown/demo/demo-dropdown_controller.js">
        You can use the service if you want to open a dropdown programmatically.
    </lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-effect</td>
                    <td><code>string</code></td>
                    <td><code>expand</code></td>
                    <td>Specify the dropdown menu effect. Options: <code>expand</code>, <code>fade</code></td>
                </tr>
                <tr>
                    <td>lx-escape-close</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if the dropdown should be closed with escape key.</td>
                </tr>
                <tr>
                    <td>lx-hover</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Specify if the dropdown should be opened on toggle hover.</td>
                </tr>
                <tr>
                    <td>lx-hover-delay</td>
                    <td><code>integer</code></td>
                    <td></td>
                    <td>The dropdown menu open delay in ms (if lx-hover).</td>
                </tr>
                <tr>
                    <td>lx-offset</td>
                    <td><code>integer</code></td>
                    <td></td>
                    <td>The dropdown menu offset in px (if not lx-over-toggle).</td>
                </tr>
                <tr>
                    <td>lx-over-toggle</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Specify if the dropdown should be opened over the toggle button.</td>
                </tr>
                <tr>
                    <td>lx-position</td>
                    <td><code>string</code></td>
                    <td><code>left</code></td>
                    <td>Define the dropdown menu position. Options: <code>left</code>, <code>right</code>, <code>center (if lx-width)</code></td>
                </tr>
                <tr>
                    <td>lx-width</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the dropdown menu width in pixels. If a percent value is defined, the dropdown menu width will be relative to the width of the toggle button.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>

    <lx-component-methods lx-title="Service api">
        <lx-component-method lx-name="LxDropdownService.open(dropdownId, targetElement)" lx-description="Open a dropdown from a target outside of the directive.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dropdownId*</td>
                        <td><code>string</code></td>
                        <td>The dropdown id specified in the directive id attribute.</td>
                    </tr>
                    <tr>
                        <td>targetElement*</td>
                        <td><code>string</code></td>
                        <td>The target element selector.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDropdownService.close(dropdownId)" lx-description="Close a dropdown opened programmatically.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>dropdownId*</td>
                        <td><code>string</code></td>
                        <td>The dropdown id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>
    </lx-component-methods>
</div>